<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <!--父组件-->
    <my-parent></my-parent>
</div>
<!--父组件模板-->
<template id="parent">
    <div>
        <h3>超市食物搜索</h3>
        食物种类:<input type="text" v-model="brand">
        <!--子组件-->
        <my-child v-bind:name="brand"></my-child>
    </div>
</template>
<!--子组件模板-->
<template id="child">
    <ul>
        <li>食物种类:{{show.brand}}</li>
        <li>食物名称:{{show.type}}</li>
        <li>市场价格:{{show.price}}</li>
    </ul>
</template>
<script>
    Vue.component('my-parent',{template:'#parent',
    data(){
        return{
            brand:''
        }
    }
    })
    Vue.component('my-child',{template:'#child',
    data(){
        return{
            content:[
                {brand:'泡面',type:'康师傅',price:'5'},
                {brand:'苹果',type:'红富士',price:'2.5'},
                {brand:'饮料',type:'青梅绿茶',price:'3'},
                {brand:'牛奶',type:'伊利',price:'3'},
                {brand:'酸奶',type:'安慕希',price:'8'},
                {brand:'火腿肠',type:'双汇',price:'2'},
                {brand:'辣条',type:'卫龙',price:'3'},
            ],
            show:{brand:'',type:'',price:''}
        }
    },
    props:['name'],
    watch:{
        name(){
            if(this.$props.name){
                var found=false
                this.content.forEach((value,index)=>{
                    if(value.brand===this.$props.name){
                        found=value
                    }
                })
                this.show=found?found:{brand:'',type:'',price:''}
            }else{
                return
            }
        }
    }
    })
    var vm=new Vue({
        el:'#app',
        data:{ }
    })
</script>
</body>
</html>